<template>
	<view class="my-content">
		<view class="form-box">
			<text class="form-title">*标题</text>
			<view class="form-item">
				<input v-model="formData.title" placeholder="请输入反馈标题" maxlength="10" />
				<text class="num-box">{{ formData.title.length }}/10</text>
			</view>
		</view>
		<view class="form-box">
			<text class="form-title">*描述内容</text>
			<view class="form-item">
				<textarea v-model="formData.content" maxlength="60" placeholder="请输入反馈内容"></textarea>
				<text class="num-box">{{ formData.content.length }}/60</text>
			</view>
		</view>
		<view class="form-box">
			<text class="form-title">上传照片</text>
			<view class="img-list">
				<view class="img-item" style="position: relative;" v-for="(item, index) in formData.images" :key="index">
					<image mode="widthFix" src="/static/icon/del.png" class="w-30 h-30"
						style="position: absolute;right: 0;top: 0;z-index: 99;" @click="formData.images.splice(index, 1)">
					</image>
					<image :src="item" mode="aspectFill" class="w-full h-full"></image>
				</view>
				<view class="img-add" v-if="formData.images.length < 4" @click="uploadImg">
					<text>+</text>
				</view>
			</view>
			<text class="num-box">{{ formData.images.length }}/4</text>
		</view>

		<button class="submit" @click="submitFeed">提交反馈</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				content: "", //反馈内容
				images: [], //反馈详情图
				title: "", //反馈标题
				user_id: "", //用户id
			}
		}
	},
	methods: {
		//提交反馈
		async submitFeed() {
			//提交反馈
			if (!this.formData.title) {
				uni.showToast({
					title: '请输入反馈标题',
					icon: 'none'
				});
				return;
			}
			if (!this.formData.content) {
				uni.showToast({
					title: '请输入反馈内容',
					icon: 'none'
				});
				return;
			}
			if (this.formData.images.length === 0) {
				uni.showToast({
					title: '请上传至少一张图片',
					icon: 'none'
				});
				return;
			}
			const formData = JSON.parse(JSON.stringify(this.formData));
			formData.images = formData.images.join(',');
			const res = await this.http("post", "/api/user/feedback", formData,true);
			if (res.code === 200) {
				setTimeout(() => {
					uni.navigateBack();
				}, 1500)
			}
			this.toast(res.message);
		},
		//上传图片
		uploadImg() {
			const self = this;
			uni.chooseImage({
				count: 4, // Maximum number of images to choose
				sizeType: ['compressed'], // Can specify original or compressed image
				sourceType: ['album', 'camera'], // Can specify source from album or camera
				success: function (res) {
					const tempFilePaths = res.tempFilePaths;
					// Assuming you have an API endpoint to upload images
					tempFilePaths.forEach(filePath => {
						uni.uploadFile({
							url: 'https://app.yinuoxinnengyuan.cn/index.php/api/index/uploads', // Replace with your upload URL
							filePath: filePath,
							name: 'file',
							success: function (uploadFileRes) {
								const data = JSON.parse(uploadFileRes.data);
								if (data.code == 200) {
									self.formData.images.push(data.data.pic_path); // Assuming the response contains the URL of the uploaded image
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									});
								}
							},
							fail: function () {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
							}
						});
					});
				}
			});

		}
	}
}
</script>

<style lang="less" scoped>
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.form-box {
		width: 100%;
		border-radius: 16upx;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;

		.form-title {
			font-size: 36upx;
			color: #000;
			font-weight: 700;
			display: block;
		}

		.form-item {
			margin-top: 20upx;
			font-size: 32upx;
		}

		.img-list {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 20upx 0 5upx 0;

			.img-add {
				width: 120upx;
				height: 120upx;
				border-radius: 8upx;
				background: #F1F1F1;

				text {
					font-size: 60upx;
					color: #A6A6A6;
					line-height: 120upx;
					text-align: center;
					display: block;
				}
			}

			.img-item {
				width: 120upx;
				height: 120upx;
				border-radius: 8upx;
				overflow: hidden;
				margin-left: 15upx;


			}
		}

		.num-box {
			display: block;
			width: 100%;
			text-align: right;
			font-size: 32upx;
			color: #A6A6A6;
		}
	}

	.submit {
		width: 100%;
		height: 80upx;
		border-radius: 16upx;
		background: #FF8F1F;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		color: #fff;
		line-height: 80upx;
		font-size: 44upx;
		font-weight: 700;
		margin-top: 80upx;
	}
}
</style>